<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            /* padding: 10px; */
            background-color: grey;
            margin: 50px;
            position: absolute;
            left: 50px;
            top: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    var box = document.getElementsByClassName("box")[0];

    // clientWidth clientHeight  元素的可视宽高 (padding + content)
    // scrollWidth scrollHeight  元素的实际宽高 (padding + content + 滚动区域)
    // scrollLeft  scrollTop     元素内滚动条的位置(可以赋值)
    // offsetLeft  offsetTop     左偏移 上偏移

    // 优点:
    // 可以快捷取值

    // 缺点:
    // 1. clientWidth clientHeight scrollWidth scrollHeight offsetLeft  offsetTop 只能取值 不能赋值(不生效)
    // 2. 对于隐藏的元素(display:none), 上述属性不生效 都是0  (如果需要对隐藏元素获取 -> getComputedStyle())
    // 3. clientWidth clientHeight  元素的可视宽高 (padding + content)



    console.log("元素的可视宽高", box.clientWidth, box.clientHeight);
    console.log("元素的实际宽高", box.scrollWidth, box.scrollHeight);

    box.onscroll = function () {
        console.log("元素内滚动条的位置", box.scrollLeft, box.scrollTop);
    }

    // 2. offsetLeft  offsetTop  => 获取匹配的元素,相对于参照物父元素的偏移
    // 参照物父元素  -> 父代元素中一个(可变的)
    console.log("左偏移 上偏移", box.offsetLeft, box.offsetTop); //左偏移 上偏移











</script>

</html>